﻿<template>
  <div class="block">
    <span class="demonstration">自定义初始值</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隐藏提示文字</span>
    <el-slider v-model="value2" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 提示文字</span>
    <el-slider v-model="value3" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用滑块组件</span>
    <el-slider v-model="value4" disabled></el-slider>
  </div>
  
    <div class="block">
      <span class="demonstration">不显示间断点</span>
      <el-slider v-model="value5" :step="10"> </el-slider>
    </div>
    <div class="block">
      <span class="demonstration">显示间断点</span>
      <el-slider v-model="value6" :step="10" show-stops> </el-slider>
    </div>
    <div class="block">
      <el-slider v-model="value7" show-input> </el-slider>
    </div>
    <div class="block">
      <el-slider v-model="value8" range show-stops :max="10"> </el-slider>
    </div>
    <div class="block">
      <el-slider v-model="value9" vertical height="200px"> </el-slider>
    </div>
    <div class="block">
      <el-slider v-model="value10" range :marks="marks"> </el-slider>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42,
        value6: 0,
        value7: 0,
        value8: 0,
        value9: 0, 
        value10: 0, 
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100
      },
    },
  }
</script>
